import React from "react";
import style from './index.less'
import SwitchDark from "@/components/SwitchDark";
import LoginForm from "@/pages/Login/components/LoginForm";
import {useModel} from "umi";

const Login = () => {
    const {isDayOrNight} = useModel('userDayOrNightModel')
    return (
        <div className={style['login-content']}
             style={{backgroundColor: isDayOrNight ? 'rgba(0, 0, 0, 0.8)' : '#eeeeee'}}>
            <div className={style['login-content-box']}
                 style={{background: isDayOrNight ? 'rgba(0, 0, 0, 0.8)' : 'hsla(0, 0%, 100%, 0.8)'}}>
                <ul>
                    <li className={style['box-item-switch']}>
                        <div className={style['box-item-switch-content']}>
                            <SwitchDark/>
                        </div>
                    </li>
                    <li className={style['box-item-bottom']}>
                        <div className={style['box-item-bottom-content']}>
                            <div className={style['box-item-bottom-content-log']}>
                                <img src={require('../../assets/images/login.png')} alt=""/>
                            </div>
                            <div className={style['box-item-bottom-content-form']}
                                 style={{background: isDayOrNight ? '#141414' : ''}}>
                                <ul>
                                    <li className={style['box-item-bottom-logo']}>
                                        <img src={require('../../assets/images/logo.png')} alt="logo"/>
                                        <span>Umi-Admin</span>
                                    </li>
                                    <li className={style['box-item-bottom-login']}>
                                        <LoginForm/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    )
}
export default Login
